<%@ page language="java" contentType="text/html; charset=UTF-8"
			    pageEncoding="UTF-8"%>
			    
<%@include file="/WEB-INF/jsp/common/common.jsp" %>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../src/css/layui.css" media="all" />
		<!--导入 js 才能使用 layui-->
		
		<style>
			body {
				padding: 20px;
				/*overflow-y: scroll;*/
			}
		</style>
	</head>

	<body>
		<table class="layui-table" id="demo" lay-filter="demo" >
		  <thead>
		    <tr>
		      <th>账号</th>
		      <th>名称</th> 
		      <th>头像</th>
		      <th>qq</th> 
		      <th>email</th>
		      <th>tel</th>
		      <th>sex</th>
		      <th>部门</th>
		      <th colspan="2">操作</th>
		    </tr> 
		  </thead>
		<tbody>
			<c:forEach items="${list }" var="item">
				<tr>
			      <th>${item.username }</th>
			      <th>${item.name }</th> 
			      <th><img src="${item.img}"/></th>
			      <th>${item.qq }</th> 
			      <th>${item.email }</th> 
			      <th>${item.tel }</th> 
			      <th>
			      	${item.sex }
			      </th>   
			      <th>${item.deptName }</th>
			      

			     <th> <button class="layui-btn layui-btn-normal" onclick="update('${item.id}')">编辑</button></th> 
			     <th><button class="layui-btn layui-btn-danger" onclick="del('${item.id}','${item.name }')">删除</button></th> 
			    </tr> 
			</c:forEach>
			
		</tbody>
	</table>
	</body>


<!--  -->

<script type="text/javascript">
		function del(ids,name)
		{
			layui.use('layer',function(){
				var $ = layui.$;
				var layer = layui.layer;
				var id = layer.confirm("是否删除"+name,{icon: 3, title:'提示'},function(){
					var xx = {id:ids}; //js对象.不需要引号
					//var xx= "id="+ids="&xx=x"; //浏览器地址
					$.ajax({
						url:'${ctx}/employee/del',
						type: "post",
						data: xx,
						success:function(msg){
							//alert(msg);
							location.href="${ctx}/employee/listAll"; //5个 bom 
						}
					});
					layer.close(id); 	
				});
				
			});
		}
		var indexUpdate; //为 了关闭弹窗记录的id
		function update(id)
		{
			layui.use('layer',function(){
				var $ = layui.$;
				var layer = layui.layer;
				
			 indexUpdate = layer.open({
			      type: 2,
			      title: '很多时候，我们想最大化看，比如像这个页面。',
			      shadeClose: true,
			      //shade: true,
			      maxmin: true, //开启最大化最小化按钮
			      area: ['70%', '70%'],
			      content: '${ctx}/employee/toUpdateUI/'+id
			    });
			});
		}
		function closeUpdate()
		{
			layui.use('layer',function(){
				var layer = layui.layer;
				layer.close(indexUpdate);
				location.href="${ctx}/employee/listAll"; //5个 bom 
			});
		}
</script>

</html>